<template>
  <view class="mine-page">
    <image
      v-if="userInfo"
      :src="`/static/images/mine/bg_level_${currentLevel + 1}.png`"
      class="mine-page-bg"
    />
    <view class="mine-header">
      <user-banner />
      <right-level-section
        v-if="userInfo"
        :currentLevel="currentLevel"
        @change="handleLevelChange"
      />
    </view>
    <view class="mine-content">
      <my-assets />
      <medal-banner />
      <more-services style="margin-bottom: 100rpx" />
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex"
import UserBanner from "./components/UserBanner/UserBanner.vue"
import RightLevelSection from "./components/RightLevelSection/RightLevelSection.vue"
import MyAssets from "./components/MyAssets/MyAssets.vue"
import MedalBanner from "./components/MedalBanner/MedalBanner.vue"
import MoreServices from "./components/MoreServices/MoreServices.vue"
export default {
  name: "mine",
  components: {
    UserBanner,
    RightLevelSection,
    MyAssets,
    MedalBanner,
    MoreServices
  },
  data() {
    return {
      menuButtonTop: this.$menuButtonTop,
      currentLevel: 0
    }
  },
  computed: {
    ...mapState("user", ["userInfo"])
  },
  methods: {
    handleLevelChange(value) {
      this.currentLevel = value
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background: #fff !important;
  width: 100%;
  height: 100%;
}

.mine-page {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  background-image: linear-gradient(to bottom, #ffe9e9, #fff);
  background-size: 100% 200rpx;
  background-position: top;
  background-repeat: no-repeat;

  &-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 912rpx;
  }
}

.mine-header {
  position: relative;
  width: 100%;
  z-index: 2;
  padding-top: calc(
    var(--status-bar-height) + $uni-spacing-row-xxl + $uni-spacing-row-xxl
  );
}

.mine-content {
  position: relative;
  z-index: 2;
  background-color: #fff;
  padding: 0 $uni-spacing-row-lg;
  display: flex;
  flex-direction: column;
  gap: $uni-spacing-row-base;
}
</style>
